<template>
  <div class="dialog">
    <el-dialog
      :title="'设备检查项'+titleText"
      :visible.sync="showDialog"
      width="35%"
      top="0"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <el-form
        ref="ruleForm"
        label-position="left"
        :model="formData"
        :rules="rules"
        class="el-form"
      >
        <el-form-item label="检查项名称：" class="w100p" prop="checkItemModelId">
          <el-select
            v-model="formData.checkItemModelId"
            clearable
            filterable
            placeholder="检查项名称选择"
            @change="changeCheckItemModel($event)"
          >
            <el-option
              v-for="(item,indexC) of checkList"
              :key="indexC+'checkItemModelId'"
              :label="item.checkItemName"
              :value="item.checkItemModelId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="检查方式：" class="w100p" prop="accessMethod">
          <el-input
            v-model="formData.accessMethod"
            clearable
            placeholder="请输入检查项名称"
          />
        </el-form-item>
        <el-form-item
          v-if="formData.checkType==='NUMTYPE'"
          label="下限："
          class="w100p"
          prop="lowerLimit"
        >
          <el-input
            v-model="formData.lowerLimit"
            clearable
            placeholder="请输入下限"
          />
        </el-form-item>
        <el-form-item
          v-if="formData.checkType==='NUMTYPE'"
          label="上限："
          class="w100p"
          prop="upperLimit"
        >
          <el-input
            v-model="formData.upperLimit"
            clearable
            placeholder="请输入上限"
          />
        </el-form-item>
        <el-form-item
          v-if="formData.checkType==='NUMTYPE'"
          label="单位："
          class="w100p"
          prop="unitName"
        >
          <el-select
            v-model="formData.unitName"
            clearable
            filterable
            placeholder="单位选择"
          >
            <el-option
              v-for="(item) of formData.unitList"
              :key="item+'unit'"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="formData.checkType==='BOOLEANTYPE'"
          label="标准值："
          class="w100p"
          prop="twoListbtn"
        >
          <div class="hang-content">
            <p
              v-for="(itemT,indexT) in formData.twoListbtn"
              :key="indexT+'boolean'"
              class="key-con-one"
              :class="itemT['status'] === true?'isActive':''"
              @click="selectListBtns(itemT,indexT)"
            >{{ itemT.name }}</p>
          </div>
        </el-form-item>
        <el-form-item
          v-if="formData.checkType==='ENUMTYPE'"
          label="内容："
          class="w100p"
          prop="addListbtn"
        >
          <div class="hang-content">
            <p
              v-for="(itemA,indexA) in formData.addListbtn"
              :key="indexA+'enum'"
              class="key-con-one"
              :class="itemA['status'] === true?'isActive':''"
              @click="selectListBtns(itemA,indexA)"
            >{{ itemA.name }}</p>
          </div>
        </el-form-item>
        <el-form-item label="检查内容：" class="w100p" prop="checkItemContent">
          <el-input
            v-model="formData.checkItemContent"
            clearable
            :rows="2"
            type="textarea"
            placeholder="请输入检查内容"
          />
        </el-form-item>
        <!-- <el-form-item v-if="formData.checkType==='NUMTYPE'" label="是否摄温：" class="w100p" prop="whetherTemperature" required :rules="[{ required: formData.checkType==='NUMTYPE'?true:false, message: '请选择是否摄温'}]">
          <el-select
            v-model="formData.whetherTemperature"
            clearable
            filterable
            placeholder="是否摄温选择"
          >
            <el-option
              v-for="(item,indexW) of whetherTemperatureList"
              :key="indexW"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>-->
        <el-form-item label="排序序号：" class="w100p" prop="sortId">
          <el-input v-model="formData.sortId" clearable placeholder="请输入排序序号" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="cancel()">取 消</el-button>
        <el-button type="primary" class="savebtn" @click="save('ruleForm')">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import inspectionDataitemApi from "@/api/equip-inspection/inspection-dataitem";
export default {
  name: "",
  components: {},
  props: {
    // 弹框名称
    titleText: {
      type: String,
      default: "",
    },
    nowChanceStau: {
      type: String,
      default: "",
    },
    show: {
      type: Boolean,
      default: false,
    },
    editObject: {
      type: [Object],
      default: () => {
        return {};
      },
    },
    nowEquipObject: {
      type: [Object],
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      formData: { unitList: [""], twoListbtn: [], addListbtn: [] },
      rules: {
        checkItemModelId: [
          {
            required: true,
            message: "请选择检查项名称",
            trigger: ["change", "blur"],
          },
        ],
        accessMethod: [
          {
            required: true,
            message: "请输入检查方式",
            trigger: ["change", "blur"],
          },
        ],
        checkItemContent: [
          {
            required: true,
            message: "请输入检查内容",
            trigger: ["change", "blur"],
          },
        ],
        upperLimit: [
          {
            required: this.formData
              ? this.formData.checkType === "NUMTYPE"
                ? !this.formData.lowerLimit
                : false
              : false,
            message: "请选择单位",
            trigger: ["change", "blur"],
          },
        ],
        lowerLimit: [
          {
            required: this.formData
              ? this.formData.checkType === "NUMTYPE"
                ? !this.formData.upperLimit
                : false
              : false,
            message: "请选择单位",
            trigger: ["change", "blur"],
          },
        ],
      },
      // 检查项类型
      checkTypeList: [
        { id: "TEXTTYPE", name: "文本型" },
        { id: "ENUMTYPE", name: "列表型" },
        { id: "BOOLEANTYPE", name: "是否型" },
        { id: "NUMTYPE", name: "数字型" },
      ],
      // // 是否摄温
      // whetherTemperatureList: [{ id: true, name: '是' }, { id: false, name: '否' }],
      showDialog: this.show,
      checkList: [],
    };
  },
  watch: {
    show(v) {
      this.showDialog = v;
      if (v) {
        this.queryTemplateList();
      }
    },
    nowChanceStau(v) {
      if (!this.showDialog) return;
      console.log("nowChanceStau", v, this.editObject);
      if (v === "add") {
        this.formData = {};
        // this.$set(this.formData, "unitList", [""]);
        // this.$set(this.formData, "twoListbtn", []);
        // this.$set(this.formData, "addListbtn", []);
      }
      if (v === "edit") {
        this.formData = this.editObject;
        this.$set(this.formData, "unitList", [""]);
        this.$set(this.formData, "twoListbtn", []);
        this.$set(this.formData, "addListbtn", []);
        if (this.formData["checkType"] === "NUMTYPE") {
          if (this.formData["unitName"]) {
            this.formData["unitList"] = this.formData["unitName"].split(",");
          } else {
            this.formData.unitList = [""];
          }
        }
        if (this.formData["checkType"] === "BOOLEANTYPE") {
          var twoListbtn = this.formData["enumContent"].split(",");
          var dataTwo = [];
          twoListbtn.forEach((a) => {
            var src = {
              name: a,
              status: false,
            };
            if (a === this.formData.standardValue) {
              src.status = true;
            }
            dataTwo.push(src);
          });
          this.formData["twoListbtn"] = dataTwo;
        }
        if (this.formData["checkType"] === "ENUMTYPE") {
          var addListbtn = this.formData["enumContent"].split(",");
          var addListbtnCheck = [];
          if (this.formData.standardValue) {
            addListbtnCheck = this.formData["standardValue"].split(",");
          }
          var data = [];
          addListbtn.forEach((a) => {
            var src = {
              name: a,
              status: false,
            };
            addListbtnCheck.forEach((b) => {
              if (a === b) {
                src.status = true;
              }
            });
            data.push(src);
          });
          this.$set(this.formData, "addListbtn", data);
        }
        this.formData = { ...this.formData };
      }
    },
  },
  created() {},
  mounted() {},
  methods: {
    // 列表项显示选择(设备检查项配置)
    selectListBtns(item, index) {
      if (this.formData.checkType === "ENUMTYPE") {
        this.$set(
          this.formData.addListbtn[index],
          "status",
          !this.formData.addListbtn[index]["status"]
        );
      }
      if (this.formData.checkType === "BOOLEANTYPE") {
        this.formData.twoListbtn.forEach((a) => {
          this.$set(a, "status", false);
          if (item["name"] === a["name"]) {
            this.$set(a, "status", true);
          }
        });
      }
      this.formData = { ...this.formData };
    },
    // 查询已有检查项模板
    queryTemplateList() {
      // 获取数据
      inspectionDataitemApi.queryTemplateList({}).then((res) => {
        if (res.code === 1) {
          let data = res.data || [];
          this.checkList = data;
        }
      });
    },
    // 改变选择的检查项模板提取该模板的具体数据
    changeCheckItemModel(data) {
      // var index = this.checkList.findIndex(a => a.checkItemModelId === data)
      var index = -1;
      this.checkList.forEach((a, indexa) => {
        if (a.checkItemModelId === data) {
          index = indexa;
        }
      });
      if (index !== -1) {
        this.formData = this.checkList[index];
        if (this.formData.checkType === "ENUMTYPE") {
          this.formData.addListbtn = [];
          var addListbtn = this.formData["enumContent"].split(",");
          for (var j in addListbtn) {
            if (addListbtn[j]) {
              this.formData.addListbtn.push({
                name: addListbtn[j],
                status: true,
              });
            }
          }
        }
        if (this.formData.checkType === "BOOLEANTYPE") {
          this.formData.twoListbtn = [];
          var twoListbtn = this.formData["enumContent"].split(",");
          for (var n in twoListbtn) {
            if (twoListbtn[n]) {
              this.formData.twoListbtn.push({
                name: twoListbtn[n],
                status: false,
              });
            }
          }
        }
        if (this.formData.checkType === "NUMTYPE") {
          if (this.formData["unitName"]) {
            this.formData["unitList"] = this.formData["unitName"].split(",");
            this.formData["unitName"] = "";
          } else {
            this.formData.unitList = [""];
          }
        }
        this.formData = { ...this.formData };
      }
    },
    save(formData) {
      this.$refs[formData].validate((valid) => {
        if (valid) {
          var params = this.formData;
          if (this.nowChanceStau === "edit") {
            params["equipmentCode"] = this.nowEquipObject.equipmentCode;
            if (this.formData.checkType === "ENUMTYPE") {
              var addListbtn1 = [];
              this.formData.addListbtn.forEach((a) => {
                if (a.status === true) {
                  addListbtn1.push(a["name"]);
                }
              });
              params["standardValue"] = addListbtn1.toString();
            }
            if (this.formData.checkType === "BOOLEANTYPE") {
              var twoListbtn1 = [];
              this.formData.twoListbtn.forEach((b) => {
                if (b.status === true) {
                  twoListbtn1.push(b["name"]);
                }
              });
              params["standardValue"] = twoListbtn1.toString();
            }
            if (this.formData.checkType === "NUMTYPE") {
              if (this.formData["upperLimit"]) {
                params["upperLimit"] = Number(this.formData["upperLimit"]);
              }
              if (this.formData["lowerLimit"]) {
                params["lowerLimit"] = Number(this.formData["lowerLimit"]);
              }
              params["unitName"] = this.formData["unitName"].toString();
            }
            inspectionDataitemApi.edit(params).then((res) => {
              if (res.code === 1) {
                this.$message.success("修改成功！");
                this.close();
              } else {
                this.$message.error(res.msg);
              }
            });
          } else if (this.nowChanceStau === "add") {
            params["equipmentCode"] = this.nowEquipObject.equipmentCode;
            if (this.formData.checkType === "ENUMTYPE") {
              var addListbtn = [];
              this.formData.addListbtn.forEach((a) => {
                if (a.status === true) {
                  addListbtn.push(a["name"]);
                }
              });
              params["standardValue"] = addListbtn.toString();
            }
            if (this.formData.checkType === "BOOLEANTYPE") {
              var twoListbtn = [];
              this.formData.twoListbtn.forEach((b) => {
                if (b.status === true) {
                  twoListbtn.push(b["name"]);
                }
              });
              params["standardValue"] = twoListbtn.toString();
            }
            if (this.formData.checkType === "NUMTYPE") {
              if (this.formData["upperLimit"]) {
                params["upperLimit"] = Number(this.formData["upperLimit"]);
              }
              if (this.formData["lowerLimit"]) {
                params["lowerLimit"] = Number(this.formData["lowerLimit"]);
              }
              params["unitName"] = this.formData["unitName"];
            }
            inspectionDataitemApi.add(params).then((res) => {
              if (res.code === 1) {
                this.$message.success(res.msg);
                this.close();
              } else {
                this.$message.error(res.msg);
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    close() {
      this.clearValidate();
      this.$emit("closeDialog");
    },
    cancel() {
      this.clearValidate();
      this.$emit("cancelDialog");
    },
    clearValidate() {
      this.formData = {};
      this.$refs.ruleForm.clearValidate();
      this.$refs["ruleForm"].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.line-click {
  width: 35px;
  height: 30px;
  // background-color: aqua;
  display: flex;
  justify-content: center;
  align-items: center;
  border: snow 1px solid;
  border-radius: 50%;
  margin-bottom: 10px;
  margin-top: 5px;
  margin-left: 5px;
  color: #fff;
  background-color: #003947;
  cursor: pointer;
}
.hang-content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.key-con-one {
  margin: 5px;
  padding: 0 20px;
  font-size: 14px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  color: #006e91;
  background-color: #fff;
  border-radius: 5px 5px 5px 5px;
  opacity: 1;
  border: 1px solid #fff;
  cursor: pointer;
}
.isActive {
  border: 1px solid #006e91;
  background-color: #006e91;
  color: white;
  font-weight: 700;
}
</style>
